<template>
	<view class="container">
		<view class="header">
			<text class="title">注册</text>
		</view>
		<view class="form">
			<view class="form-row">
				<text class="label">负责人：</text>
				<input class="input" type="text" placeholder="输入负责人姓名" v-model="manager" />
			</view>
			<view class="form-row">
				<text class="label">身份证号码：</text>
				<input class="input" type="text" placeholder="输入负责人身份证号码" v-model="idCard" />
			</view>
			<view class="form-row">
				<text class="label">手机号：</text>
				<input class="input" type="text" placeholder="输入手机号" v-model="phone" />
			</view>
			<view class="form-row">
				<text class="label">验证码：</text>
				<input class="input code-input" type="text" placeholder="输入验证码" v-model="code" />
				<button class="code-btn" @click="getCode">获取验证码</button>
			</view>
			<view class="form-row">
				<text class="label">店名：</text>
				<input class="input" type="text" placeholder="输入店名" v-model="shopName" />
			</view>
			<view class="form-row">
				<text class="label">工商营业执照号码：</text>
				<input class="input" type="text" placeholder="输入营业执照号码" v-model="licenseNo" />
			</view>
			<view class="form-row">
				<text class="label">经营区域：</text>
				<picker mode="selector" :range="regions" @change="onRegionChange">
					<view class="picker">{{ regions[regionIndex] || '选择区县' }}</view>
				</picker>
			</view>
			<view class="form-row">
				<text class="label">地址：</text>
				<input class="input" type="text" placeholder="输入详细地址" v-model="address" />
			</view>
			<view class="form-row">
				<text class="label">商家简介</text>
			</view>
			<textarea class="textarea" placeholder="请准确的介绍一下公司的情况" v-model="desc" />
			<view class="form-row">
				<text class="label">身份证正反面照片</text>
			</view>
			<view class="upload-row">
				<view class="upload-box" v-for="(item, idx) in idCardImgs" :key="idx" @click="chooseImage('idCardImgs', idx)">
					<image v-if="item" :src="item" class="upload-img" />
					<view v-else class="upload-placeholder">+
						<text class="upload-text">上传{{ idx === 0 ? '人像面' : '国徽面' }}</text>
					</view>
				</view>
			</view>
			<view class="form-row">
				<text class="label">营业执照</text>
			</view>
			<view class="upload-row">
				<view class="upload-box" @click="chooseImage('licenseImg')">
					<image v-if="licenseImg" :src="licenseImg" class="upload-img" />
					<view v-else class="upload-placeholder">+
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>
			<view class="form-row">
				<text class="label">门店照片</text>
			</view>
			<view class="upload-row">
				<view class="upload-box" @click="chooseImage('shopImg')">
					<image v-if="shopImg" :src="shopImg" class="upload-img" />
					<view v-else class="upload-placeholder">+
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>
			<button class="register-btn" @click="register">注册</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const manager = ref('');
const idCard = ref('');
const phone = ref('');
const code = ref('');
const shopName = ref('');
const licenseNo = ref('');
const regions = ref(['区域A', '区域B', '区域C']);
const regionIndex = ref(-1);
const address = ref('');
const desc = ref('');
const idCardImgs = ref([null, null]);
const licenseImg = ref(null);
const shopImg = ref(null);
const getCode = () => {
	uni.showToast({ title: '验证码已发送', icon: 'none' });
};
const chooseImage = (type, idx) => {
	uni.chooseImage({
		count: 1,
		success: res => {
			if (type === 'idCardImgs') {
				idCardImgs.value[idx] = res.tempFilePaths[0];
			} else if (type === 'licenseImg') {
				licenseImg.value = res.tempFilePaths[0];
			} else if (type === 'shopImg') {
				shopImg.value = res.tempFilePaths[0];
			}
		}
	});
};
const onRegionChange = (e) => {
	regionIndex.value = e.detail.value;
};
const register = () => {
	uni.showToast({ title: '注册功能未实现', icon: 'none' });
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #fff;
}
.header {
	background: linear-gradient(135deg, #3a8dff 0%, #166dff 100%);
	padding: 40rpx 0 20rpx 0;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	text-align: center;
}
.title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
}
.form {
	margin: 30rpx 30rpx 0 30rpx;
}
.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}
.label {
	width: 180rpx;
	color: #333;
	font-size: 28rpx;
}
.input {
	flex: 1;
	height: 60rpx;
	border: none;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
	background: #f8f8f8;
	padding: 0 20rpx;
}
.code-input {
	width: 200rpx;
}
.code-btn {
	margin-left: 20rpx;
	background: #3a8dff;
	color: #fff;
	border-radius: 30rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
	height: 50rpx;
	line-height: 50rpx;
}
.picker {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	background: #f8f8f8;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
	color: #888;
	padding: 0 20rpx;
}
.textarea {
	width: 100%;
	min-height: 100rpx;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 10rpx;
	font-size: 28rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.upload-row {
	display: flex;
	flex-direction: row;
	margin-bottom: 20rpx;
}
.upload-box {
	width: 140rpx;
	height: 140rpx;
	background: #f8f8f8;
	border: 1px dashed #ccc;
	border-radius: 10rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.upload-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10rpx;
}
.upload-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 60rpx;
}
.upload-text {
	font-size: 22rpx;
	color: #888;
}
.register-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #3a8dff 0%, #166dff 100%);
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 30rpx;
}
</style>
